<template>
	<view class="card-coupons">
		<view class="my-card" v-for="v in use_cardData.cardData" :key="v.pid">
			<view class="my-card-top">
				<text>{{v.aname}}</text>
			</view>
			<view class="my-card-middle">
				<view class="my-card-middl-left">
					<text>可用门店:晓七自习室-世贸广场店</text>
					<!-- 明区，暗区 -->
					<text>卡券优惠:{{v.cname}}</text>
					<text>可用范围:{{v.usable}}</text>
					<text>有效期限:{{v.createTime}}~{{v.expireTime}}</text>
				</view>
				<view class="my-card-middl-right">
					<button @click="user_cardBtn(v)">使用</button>
				</view>

			</view>

			<view class="my-card-bottom">
				<text>该卡券每周—至周日可用,节假日可通用</text>
				<text>该卡券每次仅可使用一次</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import http from '../../utils/http';
	import {
		onMounted,
		reactive,
		ref
	} from 'vue'
	let user_Id = ref()
	let use_cardData = reactive({
		cardData: {}
	})

	let getUserId = function(){
			uni.getStorage({
				key: 'userId',
				success: function(res) {
					user_Id.value = res.data
					getUserCardData()
				},
				fail() {
					return 
				}
			})
		}
	let user_cardBtn = function(v) {
		let cardData = v
		uni.setStorage({
			key: 'card_Data',
			data: {
				cardData
			},
			success() {
				wx.navigateTo({
					url: "../Booking_orders_submit/Booking_orders_submit"
				})
			},
			fail: function() {
				alter('卡券使用失败！');
			}
		});
	}
	let getUserCardData = function() {
		http({
			url: '/myCoupon/list',
			method: 'post',
			data: {
				id: user_Id.value
			}
		}).then((res) => {
			if (res.code == 0) {
				use_cardData.cardData = res.data
				console.log('use_cardData:', use_cardData.cardData)
			} else {
				console.log('数据加载失败!')
			}
		})
	}

	onMounted(() => {
		getUserCardData()
		getUserId()
	})
</script>

<style scoped lang="less">
	.card-coupons {
		.my-card {
			width: 670rpx;
			height: 300rpx;
			margin: 30rpx 40rpx 50rpx 40rpx;
			border-radius: 10rpx;
			box-shadow: 0 0 30rpx #ccc;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background: #ffffff;

			& .my-card-top {
				// outline: 1px solid red;
				padding: 20rpx 20rpx 0 20rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-weight: bold;
				color: #c6964f;
				flex: 1;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}

			& .my-card-middle {
				// outline: 1px solid red;
				padding: 0 20rpx 10rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #555555;
				flex: 2;

				& .my-card-middl-left {
					& text {
						display: block;
						line-height: 36rpx;
					}

				}

				& .my-card-middl-right {
					& button {
						margin: 0;
						padding: 0;
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: #c6964f;
						color: #ffffff;
						border-radius: 50rpx;
						font-size: 30rpx;
					}
				}
			}

			& .my-card-bottom {
				padding: 10rpx 20rpx 10rpx 20rpx;
				font-size: 26rpx;
				background: #f5f5f5;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #bababa;
				flex: 1;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;

				& text {
					display: block;
					line-height: 40rpx;
				}
			}
		}
	}
</style>
